<%@ page language="java" contentType="text/html; charset=utf-8"
		 pageEncoding="utf-8"%>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
	<link rel="stylesheet" href="css/base.css">
	<link rel="stylesheet" href="css/common.css">

	<link rel="stylesheet" href="css/logintest.css">
	<link rel="stylesheet" href="css/header.css">

	<!-- 引入我们的favicon首页图标 -->
	<link rel="shortcut icon" href="favicon.ico" />
	<script src="js/jquery-3.6.0.min.js">
	</script>
	<title>登录</title>
</head>
<body>
<header>
	<ul>
		<li><a href="index.jsp">Myshopping商城</a></li>
		<c:if test="${empty loginUser}">
			<li><a href="login.jsp" >登录</a></li>
			<li><a href="register.jsp" >注册</a></li>
		</c:if>
		<c:if test="${not empty loginUser}">
			<li><a href="user?method=selectUserByUid" >${loginUser.username}</a></li>
			<li><a href="user?method=logOut">注销</a></li>
			<li><a href="order?method=show" >我的订单</a></li>
			<li><a href="address?method=show">地址管理</a></li>
		</c:if>
		<li><a href="${pageContext.request.contextPath}/cart?method=show&uid=${loginUser.uid}" id="shorpcar">购物车</a></li>
	</ul>
</header>

<div class="container">
	<h1>登录</h1>
	<form action="user?method=login" method="post" id="userLogin">
		<input type="text" class="tbx" placeholder="账号" name="username" id="username">
		<label id="nameMsg"></label>

		<input type="password" class="tbx" placeholder="密码" name="password"  id="pwd">
		<input type="text" name="code" id="vcode" class="tbx" placeholder="验证码">
		<img id="pagecode" src="code?method=createCode"><label id="checkMsg"></label>

		<input type="submit" class="sub" value="登录" name="submit">
		<input type="button" class="sub" value="还没有账号？点击注册"
			   onclick="javascrtpt:window.location.href='${pageContext.request.contextPath }/register.jsp'">


		<div id="text"><input id="autoLogin" name="auto" type="checkbox" /><div class="msg">两周以内自动登录</div></div>
		<div id="autoLoginMsg"></div>
		<div style="color:black">${msg}</div>
	</form>
</div>
<script>
	$(function(){
		//1.验证用户名是否存在
		$("#username").change(function(){
			$.get("checkUserName","username="+this.value,function(data){
				if(data==0){
					$("#nameMsg").html("用户名不存在").css("color","red");
				}else{
					$("#nameMsg").html("");
				}
			})
		});
		//2.点击验证码 更新验证码
		$("#pagecode").click(function(){
			$("#pagecode").attr("src","code?method=createCode&t="+Math.random());
		});
		//3.验证输入的验证码 是否正确
		$("#vcode").change(function(){
			$.get("checkCode","code="+this.value,function(data){
				if(data==0){
					$("#checkMsg").html("<font color='green'>OK</font>");
					$("#btn").removeAttr("disabled");
				}else{
					$("#checkMsg").html("<font color='red'>ERROR</font>");
					$("#pagecode").attr("src","code?"+Math.random());
					$("#btn").Attr("disabled",true);
				}
			})
		});
		//4.两周以内自动登录  友好提示
		$("#autoLogin").click(function(){
			if(this.checked){
				$("#autoLoginMsg").html("网吧等公共场合，请勿勾选").css("color","red");
			}else{
				$("#autoLoginMsg").html("");
			}
		})
	})

	// 定义一个con绑定.container
	const con = document.querySelector('.container');

	// 定义两个函数开关（门）
	let isIn = true; // 鼠标进去的门，默认打开
	let isOut = false; // 鼠标出去的门，默认关闭

	var span; // 给未出生的元素取个名字span

	// 添加监听
	// 监听鼠标进去的事件
	con.addEventListener('mouseenter', (e) => {
		// 如果进去的门是打开的，就可以执行这个函数
		if (isIn) {
			// 获取进入的鼠标位置
			// 生成元素的位置=进入点距离窗口的距离-父盒子距离窗口的距离
			let inX = e.clientX - e.target.offsetLeft;
			let inY = e.clientY - e.target.offsetTop;

			// 创建一个span元素，并且给它对应的出生坐标
			let el = document.createElement('span');
			el.style.left = inX + 'px';
			el.style.top = inY + 'px';
			// 添加到con对应的父元素，即container
			con.appendChild(el);

			$('.container span').removeClass('out'); // 移除出去的动画
			$('.container span').addClass('in'); // 添加进入的动画
			span = document.querySelector('.container span');
			isIn = false; // 关闭进来的门（不能使用进入的方法）
			isOut = true; // 打开出去的门（可以使用出去的方法）
		}
	})
	// 监听鼠标出去的事件
	con.addEventListener('mouseleave', (e) => {
		if (isOut) {
			// 获取出去的鼠标位置
			// 生成元素的位置=出去点距离窗口的距离-父盒子距离窗口的距离
			let outX = e.clientX - e.target.offsetLeft;
			let outY = e.clientY - e.target.offsetTop;

			$('.container span').removeClass('in'); // 移除进入的动画
			$('.container span').addClass('out'); // 添加出去的动画
			// 添加出去的坐标
			$('.out').css('left', outX + 'px');
			$('.out').css('top', outY + 'px');

			isOut = false; // 关闭出去的门
			// 当动画结束后再删除元素
			setTimeout(() => {
				con.removeChild(span); // 删除元素
				isIn = true; // 打开进入的门
			}, 500);
		}
	})
</script>
</body>
</html>